<template>
  <div class="course-question">
    <div class="question-body">
      <h3 class="question-header">[{{ question.qiestion_type }}] {{ question.content }}</h3>
      <!-- <div class="question-options">
        <component :is="AnswerComponents[question.question_type]" />
      </div>
      <div class="question-comments">
        <Comment :comment-list="[]"></Comment>
      </div> -->
    </div>
  </div>
</template>

<script setup lang="ts">
import { type Component } from 'vue';
// import JianDa from './components/JianDa.vue';
// import XuanZe from './components/XuanZe.vue';
import Comment from '@/components/Comment/index.vue';

interface IProps {
  // TODO: 数据结构
  question?: any;
}
const props = withDefaults(defineProps<IProps>(), {
  question: {
    id: 1,
    question: '',
    options: '',
    answer: '',
    explanation: '',
    question_type: '',
    question_class: '',
    question_source: '',
  },
});

const AnswerComponents: Record<string, Component> = {
  // '1': XuanZe,
  // '2': XuanZe,
  // '3': JianDa,
};
</script>

<style lang="less" scoped>
.course-question {
  height: 100%;
  overflow-y: auto;
  padding: 16px;
}
</style>
